<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../css/detail.css  "/>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 顶部 -->
    <div class="container-fluid hidden-xs box">
        <div class="container main">
            <div class="row">
                <!-- 左边 -->
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <ul class="nav nav-pills h">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">华为官网</a></li>
                        <li><a href="#">花粉俱乐部</a></li>
                        <li><a href="#">V码(优购码)</a></li>
                        <li><a href="#">企业购</a></li>
                        <li><a href="#">Select Region</a></li>
                        <li>
                            <a  class="dropdown-toggle" data-toggle="dropdown"href="#">
                            更多精彩<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">HarmonyOS</a></li>
                            <li><a href="#">应用市场</a></li>
                            <li><a href="#">华为终端云空间</a></li>
                            <li><a href="#">开发者联盟</a></li>
                        </ul>
                    </li>
                      </ul>
                </div>
                <!--右边  -->
                <div class="col-lg-6 col-md-6 col-sm-6 hidden-xs row">
                    <ul class="nav nav-pills h col-md-4 col-md-push-1 login">
                        <li><a href="../html/longin.html">请登录</a></li>
                        <li><a href="../html/register.html">注册</a></li>
                    </ul>
                      <ul class="nav nav-pills h col-md-8">
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">客服<span class="caret"></span></a></li>
                        <li><a href="#">网站导航<span class="caret"></span></a></li>
                        <li><a href="#">手机版<span class="caret"></span></a></li>
                        <li>
                            <a href="cart.html">
                            <span style="margin-right: 1px;" class="glyphicon glyphicon-shopping-cart"></span>购物车
                            </a>
                        </li>
                      </ul>
                </div>
            </div>
        </div>
    </div>
<!-- 导航 -->
    <div class="container-fluid box1">
        <div class="container main">
            <div class="row">
                <div class="col-md-2 nav-left hidden-sm hidden-xs">
                    <img src="../img/logo_app.png"/>
                </div>
                <div class="col-md-8">
                    <ul class="nav nav-pills nav-justified nav1">
                        <li class="nav-item">
                            <a class="nav-link active" href="list.html"><span class="glyphicon glyphicon-th-list"></span>全部商品分类</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">华为专区</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">莫塞尔</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link disabled" href="#">华为智选</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">鸿蒙智联</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link disabled" href="#">HarmonyOS</a>
                          </li>
                      </ul>
                </div>
                <div class="col-md-2 row nav-right">
                    <span class="glyphicon glyphicon-search col-md-2  col-md-push-11"></span>
                </div>
            </div>
        </div>
    </div>
    <!-- 面包屑 -->
    <div class="container-fluid box1">
        <div class="container main">
            <ul class="breadcrumb mianbao">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">手机</a></li>
                <li><a>HUAWEI P系列</a></li>
                <li class="sj"><a style="color: rgb(238, 122, 73);">HUAWEI Pd50 Pro 8GB+256GB 曜金黑</a></li>
            </ul>
        </div>
    </div>

    <div class="container-fluid box1">
        <div class="container main">
            <div class="row">
                <!-- 放大镜 -->
                <div class="col-md-5 enlarge">
                    <div class="middle">
                        <img src="" alt="">
                        <div class="shade"></div>
                        <div class="big">
                            <img src="" alt="">
                        </div>
                    </div>
                    <div class="small clearfix" style="border:1px solid rgba(12, 55, 226, 0.364);">
                        <!-- <a href="" class="leftBtn fl">&lt;</a> -->
                        <div class="wraper fl">
                            <ul>                            
                                <li class="active"><img src="" alt=""></li>
                            </ul>
                        </div>                    
                        <!-- <a href="" class="rightBtn fr">&gt;</a> -->
                    </div>
                </div>
                <div class="col-md-7 description">
                    <h4>HUAWEI P50 Pro 8GB+256GB 曜金黑</h4>
                    <a href="#" style="color: rgb(214, 123, 123);" class="introduce">
                        【抢先预订 价保618 到手价5438元起】①预订立省50元 ②尾款最高享24期免息 ③赠199元官方保护壳 ④部分版本赠199元66W超级快充套装 | 点击前往预订>>
                    </a>
                    <!-- <div class="pic">
                        <p><span style="padding-right: 10px;">价&nbsp;&nbsp;&nbsp;&nbsp;格</span><span><span style="color: rgb(234, 106, 106);font-size: 20px;">￥5988.00</span></p>
                        <p><span style="padding-right: 10px;">促&nbsp;&nbsp;&nbsp;&nbsp;销</span><span class="red">赠品</span><a href="#" style="color: rgb(98, 94, 94);">去选择></a></p>
                        <p><span class="red">以旧换新抵现</span><a href="#" style="color: rgb(98, 94, 94);">去选择></a></p>
                        <p><span class="red">分期免息</span><a href="#" style="color: rgb(98, 94, 94);">去选择></a></p>
                        <p><span class="red">赠送积分</span><a href="#" style="color: rgb(98, 94, 94);">去选择></a></p>
                    </div> -->
                    <div class="pic">
                        <div class="row" style="margin-bottom: 10px;">
                            <div class="col-md-2"><span style="padding-right: 10px;">价&nbsp;&nbsp;&nbsp;&nbsp;格</span></div>
                            <div class="col-md-10 souceprice"><span style="color: rgb(234, 106, 106);font-size: 20px;">￥5988.00</span></div>
                        </div>
                        <div class="row" style="margin-bottom: 10px;">
                            <div class="col-md-2"><span style="padding-right: 10px;">促&nbsp;&nbsp;&nbsp;&nbsp;销</span></div>
                            <div class="col-md-10"><span class="red">赠品</span><a href="#" style="color: rgb(98, 94, 94);">去选择></a></div>
                        </div>
                        <div class="row" style="margin-bottom: 10px;">
                            <div class="col-md-2"></div>
                            <div class="col-md-10"><span class="red">以旧换新抵现</span>以旧换新至高补贴2022元</div>
                        </div>
                        <div class="row" style="margin-bottom: 10px;">
                            <div class="col-md-2"></div>
                            <div class="col-md-10"><span class="red">分期免息</span>银联、花呗、掌上生活、工行分期支付可享免息含多款...</div>
                        </div>
                        <div class="row" style="margin-bottom: 10px;">
                            <div class="col-md-2"></div>
                            <div class="col-md-10"><span class="red">赠送积分</span>购买即赠商城积分，积分可抵现~</div>
                        </div>
                    </div>

                    <p style="margin-top: 10px;">服务说明</p>
                    <div class="addCart clearfix">
                        <div class="number fl">
                            <input type="text" name="num" value=1 id="num">
                            <button class="add">+</button>
                            <button class="reduce">-</button>
                        </div>
                        <button type="button" class="fl addBtn btn-danger btn-sm">加入购物车</button>
                        <button type="button" class="fl toCart btn-primary btn-sm">进入购物车</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
               
    <div class="container-fluid details">
        <div class="main tab">
            <ul class="list-inline text-center" style="margin-top: 20px;background-color: rgb(187, 181, 174);">
                <li>商品详情</li>
                <li>包装与售后</li>
                <li>规格参数</li>
            </ul>
            <ol class="list-inline oo">
                <li class="active imgg">111</li>
                <li>222</li>
                <li>333</li>
            </ol>
        </div>
    </div>
</body>
</html>
<script>
    /*

    */
   $('.tab>ul>li').click(function(){
       $(this).css({ "color": "red","border-bottom": "1px solid red"}).siblings().css({"color": "#fff","border-bottom": "none"})
       $(this).parent().next().find('li').eq($(this).index()).show().siblings().hide()
   })
</script>
<script src="../utils/ajax.js"></script>
<script src="../lib/layer/layer.js"></script>
<script src="../utils/cookie.js"></script>
<script src="../js/checkLogin.js"></script>
<script src="../js/detail.js"></script>
<script src="../utils/enlarge.js"></script>

